<template>
  <div>
    <!-- 前置 -->
    <template slot="prepend" v-if="prepend">
      {{ prepend }}
    </template>
    <template slot="prepend" v-else-if="prepend && prependIcon">
      {{ prepend }}
      <i :class="prependIcon"></i>
    </template>
    <template slot="prepend" v-else-if="!prepend && prependIcon">
      <i :class="prependIcon"></i>
    </template>

    <!-- 后置 -->
    <template slot="append" v-if="append">
      {{ append }}
    </template>
    <template slot="append" v-if="append && appendIcon">
      {{ append }}
      <i :class="appendIcon"></i>
    </template>
    <template slot="append" v-if="!append && appendIcon">
      <i :class="appendIcon"></i>
    </template>
  </div>
</template>

<script>
export default {
  name: "sSlot",
  props: {
    prepend: {
      type: String,
      default: ''
    },
    prependIcon: {
      type: String,
      default: ''
    },
    append: {
      type: String,
      default: ''
    },
    appendIcon: {
      type: String,
      default: ''
    },
  },
  data() {
    return {}
  }
}
</script>

<style scoped>

</style>
